<template>
	<view class="layout" v-if="data">
		<view class="title">

			<view class="tag" v-if="data.select == true">
				<uni-tag inverted="true" text="置顶" type="error" size="small"></uni-tag>
			</view>
			<view class="font">{{data.title}}</view>
		</view>

		<view class="info">
			<view class="item">{{data.author}}</view>
			<view class="item">
				<uni-dateformat :date="data.publish_date" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
			</view>
		</view>

		<view class="content">
			<!-- <rich-text :nodes="data.content"></rich-text> -->
			<mp-html :content="data.content"></mp-html>
		</view>

		<view class="count">
			阅读 {{view_count}}
		</view>

	</view>
</template>

<script setup>
	
	import {ref} from 'vue'
	
	import {apiNoticeDetail} from '@/api/api.js'
	import {onLoad} from '@dcloudio/uni-app'
	

	const data = ref(null)
	
	let noticeId;
	 
	 onLoad((e) => {
		 let {id} = e
		 noticeId = id
		 getNoticeDetail()
	 })
	 
	const getNoticeDetail = async() => {
		let res = await apiNoticeDetail({
			id: noticeId
		})
		console.log(res)
		data.value = res.data
	}
	
</script>

<style lang="scss" scoped>
	.layout {
		.title {
			padding: 30rpx 30rpx;
			display: inline-block;
			align-items: flex-start;
			word-wrap: break-word;
			line-height: 1.8rem;

			.tag {
				margin-right: 10rpx;
				display: inline-block;

			}

			.font {
				font-size: 32rpx;
				color: #000;
				flex: 1;
				display: inline;
				white-space: normal;
				word-break: break-all;
			}

		}

		.info {
			display: flex;
			padding: 0 30rpx;

			.item {
				font-size: 24rpx;
				color: #999;

				&:first-child {
					margin-right: 30rpx;
				}
			}
		}
		.content {
			padding: 30rpx;
		}
		.count {
			padding: 30rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
</style>